<template>
    <div>
        <div class="center">
            <div class="center_top">
                <div class="left">京东秒杀</div>
                <div class="right">爆款轮番秒</div>
            </div>
            <div class="center_bottom">
                <ul>
                    <li><img src="../../../images/111.jpg" alt=""><p>￥9.9</p></li>
                    <li><img src="../../../images/222.jpg" alt=""><p>￥49.9</p></li>
                    <li><img src="../../../images/333.jpg" alt=""><p>￥587</p></li>
                    <li><img src="../../../images/444.png" alt=""><p>￥9.9</p></li>
                    <li><img src="../../../images/555.jpg" alt=""><p>￥9.9</p></li>
                    <li><img src="../../../images/666.jpg" alt=""><p>￥3149</p></li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Miaosha',
    components: {

    }
}
</script>

<style lang="scss" scoped>
.center {
    width: 355px;
   // height: 350px;
    background-color: rgb(240, 227, 227);
    margin: 10px auto;
    border-radius: 15px;

    .center_top {
        width: 100%;
        height: 50px;
        line-height: 50px;
        display: flex;
        position: relative;
        border-radius: 15px 15px 0 0;

        .right {
            position: absolute;
            right: 5px;
            top: 0;
            font-size: 10px;
            color: rgb(223, 50, 50);
        }
    }

    .center_bottom {
        ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin: 0 0;
            padding-left: 0;

            li {
                img {
                    width: 55px;
                    height: 55px;
                    background-size: 100% 100%;
                    margin: 0 2px;
                }
            }
        }
    }
}
</style>